<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <style>
        #box,#jqbox{
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
        #jqbox{
            position: relative;
            left: 0;
            opacity: 1;
        }
        #demo{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            left: 10px;
        }
    </style>
</head>
<body>
    <button id="btn">点击隐藏/显示</button>
    <div id="box">
        一个可以隐藏的元素div
    </div>
    <hr>
    <button id="jqbtn">点击执行动画</button>
    <button id="stop">停止动画</button>
    <div id="jqbox">

    </div>

    <button id="test">测试动画</button>
    <div id="demo">

    </div>
    <script src="jquery.js"></script>
    <script>
        // 用一个布尔值记录当前元素的状态，隐藏时设为false，显示时设置为true
        var isShow = true
        /*
           (1) 隐藏/显示
            hide(speed,callback) 
            show(speed,callback)
                参数一:slow/fast/毫秒 使用slow/fast时加引号
                参数二：动画完成后执行的回调函数
            淡入/淡出
            findeIn(...)
            findeOut(...)
            fadeTo(speed,opacity,callback)
                参数二：设置为给定的不透明度（值介于 0 与 1 之间）
            滑入/滑出
            slideDown(...)
            slideUp(...)
            
        */
        $('#btn').click(function(){
            if(isShow){
                // $('#box').hide(2000)
                // $('#box').fadeOut('slow')
                $('#box').slideUp('slow')
                isShow = false
            }else{
                // $('#box').show(2000)
                $('#box').slideDown('slow',function(){
                   console.log('动画结束')
                })
                isShow = true
            }
        })
        // 疑问：$('#jqbox').css('transform','translate(200px,0)')
        /*
            栈：先进后出
            队列：先进先出
            练习：'3*(1+6)+(5-9)'

            (2)animate(properties, options)
            学习网址：http://www.jquery123.com/animate/
            参数一：一组css属性键值对
            参数二： [, duration ] [, easing ] [, complete ] 

            支持链式调用
            .animate().animate() 形成一个动画队列，每当队列中的一个动画执行完毕时自动执行下一个动画
            举例：
            $('#jqbox').animate(
                {
                    left:'200px'
                }).animate({
                    top:'200px'
                }).animate({
                    left:'0px'
                }).animate({
                    top:'0px'
                })
            })
        */
        $('#jqbtn').click(function(){
            $('#jqbox').animate({
                left:'200px',
                opacity:0.5,
            },{
                duration:2000,
                done:function(p,isStop){
                    // 动画完毕，不管是执行完毕,还是被结束，都会触发
                    // isStop：动画是否被手动结束
                    console.log(1)
                },
                complete:function(){
                    // 在动画完成时执行的函数。
                    console.log(2)
                }
            })
        })
        /*
            (3)
            stop()停止动画
            参数一：是否清除队列中尚未执行的动画
            参数二：是否跳到动画的结束状态
            finish()
        */
        $('#stop').click(function(){
            $('#jqbox').stop()
        })
        /*
            (4)延迟
            delay()
        */
        $('#test').click(function(){
            $('#demo').animate({
                opacity:0.25,
                left:'+=50',
                height:'toggle'
            },{
                duration:2000,
                complete:function(){
                    $(this).after('<div>动画完成</div>')
                }
            })
        })

    </script>
</body>
</html>